<template>
    <div class="main">
        <Header class="main_header"/>
        <div style="height: 63px;"></div>
        <div class="main_body">
            <div class="main_left">
                <div class="main_left_nav">
                    <div class="main_left_nav_1">
                        <router-link to="/answer/recommend">
                            推荐
                        </router-link>
                    </div>
                    <div class="main_left_nav_2">
                        <router-link to="/answer/attention">
                            关注
                        </router-link>
                    </div>
                    <div class="main_left_nav_3">
                        <router-link to="/answer/hot">
                            热榜
                        </router-link>
                    </div>
                    <div class="main_left_nav_4">
                        <a-input-search
                                v-model:value="requestParams.key"
                                placeholder="输入关键词..."
                                enter-button
                                :loading="isLoading"
                                @keyup="handleKeyUp"
                                @search="search"
                        />
                        <div class="main_left_nav_4_ops">
                            <div v-for="(item, index) in showOps"
                                 :key="index"
                                 v-show="isShow"
                                 @click="search"
                                 @mouseover="opsIndex = index"
                                 :style='{"background-color": opsIndex===index ? "#EEE" : "#fff"}'
                            >
                                <div class="main_left_nav_4_item">
                                    <img class="main_left_nav_4_item_img" src="@/assets/img/answer/搜索.png" alt="搜索">
                                    <div class="main_left_nav_4_item_option" @click="mouseClick(item)">{{ item }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <router-view></router-view>
            </div>
            <div style="flex: 3;"></div>
            <div class="main_right">
                <UploadProblem class="main_right_on"/>
                <Hot class="main_right_under"/>
            </div>
        </div>
        <Footer/>
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue'
import UploadProblem from '@/views/home/answer/uploadProblem/index.vue'
import Hot from '@/views/home/answer/uploadProblem/hot.vue'
import {getSuggestion, searchProblem} from "@/api/home/answer";
import {ref} from "vue";
import {Answer, RequestParams} from "@/model/home/answer";
// @ts-ignore
import Publish from 'pubsub-js'
import lodash from "lodash";

//自动补全显示的选项列表
const showOps = ref<string[]>([])
//当前索引
const opsIndex = ref<number>(-1)
//是否显示选项列表
const isShow = ref<boolean>(true)
//是否显示加载动画
const isLoading = ref<boolean>(false)

//全文检索所需的参数
const requestParams = ref<RequestParams>({
    key: '',
    page: 1,
    size: 10,
    sortBy: ''
})

//鼠标点击下拉框搜索
const mouseClick = (option: string) => {
    requestParams.value.key = option
    search()
}

//上下键选择搜索
//防抖 debounce
const handleKeyUp = lodash.debounce((e: any) => {
    if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 8) {
        if (!requestParams.value.key) {
            // key没有值,不用搜索
            showOps.value = [];
            return;
        }
        getSuggestion(requestParams.value.key).then((res) => {
            showOps.value = res.data.data.list
        })
    } else if (e.keyCode === 38) {//上键
        if (opsIndex.value > 0) {
            opsIndex.value--;
            requestParams.value.key = showOps.value[opsIndex.value]
        } else {
            opsIndex.value = showOps.value.length - 1;
            requestParams.value.key = showOps.value[opsIndex.value]
        }
    } else if (e.keyCode === 40) {//下键
        opsIndex.value = (opsIndex.value + 1) % showOps.value.length;
        requestParams.value.key = showOps.value[opsIndex.value]
    } else if (e.keyCode === 13) {//回车键
        //按回车,则搜索
        search();
        showOps.value = []
    } else if (e.keyCode === 27) {//ESC键
        isShow.value = false
    }
}, 200)

//全文检索
const search = () => {
    isLoading.value = true
    searchProblem(requestParams.value).then((res) => {
        res.data.data.pageResult.problems.map((item: Answer) => {
            item.title = item.title.replaceAll("<em>", "<nobr style='color: red;white-space: nowrap;'>")
            item.title = item.title.replaceAll("</em>", "</nobr>")
        })
        const msg = []
        msg.push(res.data.data.pageResult.problems)
        msg.push(requestParams.value.key)
        msg.push(res.data.data.pageResult.total)
        Publish.publish('searchProblemList', msg)
        isLoading.value = false
        showOps.value = []
    })
}
</script>

<style lang="less" scoped>
.main {
  .main_header {
    height: 70px;
    position: fixed;
    width: 100%;
    z-index: 99999;
  }

  .main_body {
    display: flex;
    margin-left: 15%;
    margin-right: 15%;
    word-break: break-all;

    .main_left {
      margin-top: 1%;
      flex: 7;
      width: 70%;
      background-color: #ffffff;

      .main_left_nav {
        display: flex;
        border-bottom: 1px solid #f0f0f0;
        white-space: nowrap;
        padding: 5px;

        .main_left_nav_1 {
          font-size: 18px;
          margin-right: 50px;
        }

        .main_left_nav_2 {
          font-size: 18px;
          margin-right: 50px;
        }

        .main_left_nav_3 {
          font-size: 18px;
          margin-right: 50px;
        }

        .main_left_nav_4 {
          font-size: 18px;
          margin-left: auto;
          margin-right: 20px;
          width: 50%;
          position: relative;

          ::-webkit-input-placeholder {
            color: #03e9f4;
          }

          .main_left_nav_4_ops {
            z-index: 99999;
            background-color: #fff;
            text-align: left;
            font-weight: bold;
            font-size: 15px;
            position: absolute;
            width: 100%;

            .main_left_nav_4_item {
              display: flex;
              cursor: pointer;

              .main_left_nav_4_item_img {
                width: 20px;
                height: 20px;
                margin: 10px;
              }

              .main_left_nav_4_item_option {
                padding-top: 7px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }

    .main_right {
      margin-top: 6%;
      //flex: 3;
      position: fixed;
      top: 10px;
      margin-left: 49%;
      width: 355px;
    }
  }
}

.router-link-active {
  color: red !important;
}
</style>